<!DOCTYPE html>
<html>
<head>
    <title>历史</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <#--样式-->
    <link rel="stylesheet" media="screen" href="${request.contextPath}/css/style.css">
    <#--layui-->
    <link rel="stylesheet" media="screen" href="${request.contextPath}/layui/css/layui.css">

</head>
<body >





    <div class="content" >



       <div >
           <#--月亮放置区-->
           <div class="light" style="cursor:pointer;" onclick="window.location.href = '/history/'">
           </div>

           <hr class="line-left">
           <hr class="line-right">

           <div class="main">
               <h1 class="title">新增图片</h1>
           </div>




           <div class="textContent" style="padding-bottom: 300px;">

               <div style="width: 900px;">
                   <input type="hidden" name="id" value="${id!''}"/>

                   <#if imgList??>
                   <#--轮播图-->
                       <div class="layui-carousel" id="loopImg">
                           <div carousel-item="" style="text-align:center;">
                               <#list imgList as img>
                                   <div>
                                       <img onclick="delImg('${img.id!''}')" style="max-width:300px;max-height:400px;" src="/history/other/read?id=${img.path}" />
                                   </div>
                               </#list>
                           </div>
                       </div>
                       <br/>
                   </#if>

                   <#--图片-->
                   <fieldset class="layui-elem-field layui-field-title">
                       <legend>上传图片</legend>
                   </fieldset>

                   <div class="layui-form-item">
                       <div class="layui-input-block">
                           <#--预览的图片位置-->
                           <img style="max-width:300px;max-height:400px;" src="" id="viewImg">
                       </div>
                   </div>
                   <#--<div class="layui-form-item">
                       <label class="layui-form-label">图片说明</label>
                       <div class="layui-input-block">
                           <input type="text" name="title" id="title" lay-verify="title" autocomplete="off" placeholder="说明" class="layui-input">
                       </div>
                   </div>-->
                   <button type="button" class="layui-btn" id="uploadImg">
                       <i class="layui-icon">&#xe67c;</i>选择图片
                   </button>
                   <button class="layui-btn layui-btn-danger" id="uploadImgButton" type="button" >上传图片</button>

                   <hr class="layui-bg-orange">
                   <br/>
                   <br/>
                   <br/>

               </div>




           </div>



       </div>
    </div>




</body>


<!-- scripts -->

<#--layui-->
<script src="${request.contextPath}/layui/layui.js"></script>
<#--js-->
<script src="${request.contextPath}/js/jquery.min.js"></script>


<script>


    /**
     * 图片上传
     */
    layui.use('upload', function(){
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#uploadImg' //绑定元素
            ,url: '/history/other/addHistoryImg' //上传接口
            ,done: function(res, index, upload){
                //上传完毕回调
                console.log("成功的回调");
                console.log(res);
                layer.closeAll('loading'); //关闭loading
                if (res != null){
                    if (res.status === "success"){
                        layer.msg(res.msg);
                        window.location.reload();
                    } else {
                        layer.msg(res.msg);
                    }
                } else {
                    console.log(res);
                }
            }
            ,accept: 'images' //允许上传的文件类型
            ,error: function(index, upload){
                //请求异常回调, upload 可以重新上传
                console.log("上传失败的回调！")
                console.log(index);
                console.log(upload);
                layer.closeAll('loading'); //关闭loading
                layer.msg("上传图片失败！");
            }
            ,data: { //附加参数
                title: function(){
                    return $('#title').val();
                }
                ,eventOccurId: function(){
                    return $("input[name='id']").val();;
                }
            }
            ,acceptMime:'image/*' //规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表
            ,exts:'jpg|png' //允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时，那么你设置 exts: 'zip|rar|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定，那么限制的就是图片的文件格式
            ,auto: false //是否选完文件后自动上传。如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传
            ,bindAction:'#uploadImgButton' //指向一个按钮触发上传
            ,size: 3200//设置文件最大可允许上传的大小，单位 KB。不支持ie8/9
            ,choose:function (obj) { //选择文件后的回调函数。返回一个object参数
                console.log("选择文件后的回调函数:");
                console.log(obj);
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#viewImg').attr('src', result); //图片链接（base64）
                });
            }
            ,before:function (obj) { //文件提交上传前的回调。返回一个object参数
                console.log("文件提交上传前的回调:");
                console.log(obj);
                layer.load(); //上传loading
            }
        });
    });


    /**
     * 轮播图
     */
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#loopImg'
            ,width: '300px' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });

    /**
     * 删除图片
     */
    function delImg(id) {
        layer.confirm('确认是否删除该图片，注意：删除后不可恢复?', {icon: 3, title:'警告'}, function(index){
            $.ajax({
                url:'/history/other/delHistoryImg', //请求的url地址
                dataType:'json', //返回的格式
                data: {"id" : id},//参数值 {"id":"value"}
                type:'get', //请求的方式
                beforeSend:function(){ //请求前的处理
                    console.log("提交的数据:" + id)
                },
                success:function (req) {
                    if (req != null){
                        if (req.status === "success"){
                            layer.msg(req.msg);
                            window.location.reload();

                        } else {
                            layer.msg(req.msg);
                        }
                    } else {
                        console.log(req);
                    }
                },
                error:function (e) {
                    console.log(e);
                    layer.msg("未知错误");
                }

            });

            layer.close(index);
        });
    }


</script>



</html>